<template>
	<view class="myArea">
		<view class="all">
			<text>我的邀请收益：</text>
			<view class="money">USDT: {{data.USDT}}</view>
			<view class="money">HNT: {{data.HNT}}</view>
		</view>
		<view class="title">
			<text>{{$t('mine.myArea.id')}}</text>
			<text>{{$t('mine.myArea.achievement')}}</text>
		</view>
			<!-- 内容 -->
		<view class="myArea-content">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="{use:false}" top="140">
			
		<view class="box" v-if="list" v-for="(a,b) in list" :key="b">
			<text>{{a.nickname | famart}}</text>
			<text>{{a.c_buy_number}}</text>
		</view>
		</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import api from '../../common/api.js'
	export default {
		components: {
			mixins: [MescrollMixin],
		},
		data() {
			return {
				list:[],
				pagesSheb: 1,
				data: '',
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				mescroll: null
			}
		},
		mounted() {
			this.getdata()
		},
		methods: {
			getdata() {
				this.$api.sendRequest({
					data: {},
					url: api.COMMUNITY,
					success: (res) => {
						this.list = res.data
					}
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			upCallback(page) {
				this.$api.sendRequest({
					url: api.COMMUNITY,
					data: {
						page: page.num,
					},
					success: res => {
						console.log(res.data);
						this.data = res.data
						let curPageData = res.data.user_community_sel.data;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						//设置列表数据
						if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
						this.list = this.list.concat(curPageData); //追加新数据
						console.log('curPageLen, res.total', curPageLen, res.data.user_community_sel.total)
						this.mescroll.endBySize(curPageLen, res.data.user_community_sel.total)
					}
				})
			}
		},
		// 过滤
		filters: {
			famart(val) {
				var reg=/(\d{3})\d{4}(\d{4})/;
				if(val) {
					return val.replace(reg, "$1****$2")
				} else {
					return ''
				}
			}
		},
		created() {
			
		}
	}
</script>
<style>
	page{
		background-color: #F3F3F3;
	}
</style>
<style scoped>
	.all {
		background-color: #FFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100rpx;
		margin: auto;
		padding-left: 40rpx;
		/* margin-left: 40rpx; */
	}
	.all text{
		font-size: 30rpx;
		padding-left: 20rpx;
		font-weight: 400;
		color: #000000;
	}
	.money {
		font-size: 30rpx;
		font-weight: 400;
		color: #FF1D1D;
	}
	.money:last-child {
		margin-left: 20rpx;
	}
	
	.title{
		line-height: 60rpx;
		width: 90vw;
		margin: auto;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}
	.title>text:nth-of-type(1){
		padding-left: 100rpx;
		/* text-align: center; */
	}
	.title>text:nth-of-type(2){
		padding-right: 60rpx;
	}
	.myArea-content{
		background-color: #FFFFFF;
	}
	.box{
		margin: 20rpx 80rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #F3F3F3;
	}
	.box>text:nth-of-type(2){
		position: relative;
		left: -24rpx;
	}
</style>
